今天目的

今天要加值到陣列，並且把陣列做印出到畫面，並且做收尋。

新增輸入框跟按鈕

新增輸入框並且填值，按下按鈕後新增資料，由於程式碼後長所以只能解部分，請見諒。

  render() {

    let updatedList = this.state.data.filter((item)=>{ //迭代後把值做比較 
        return item.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 // indexOf 找到 = 1
    }) //找到資料後存回 updatedList

    let sort_data = updatedList.map((item,index,array)=>{ //把資料迭代後用成li標籤
        return <li  key={index}>{item}</li>
    })

    return(
      <div>
         新增資料:<input type="text" onChange={this.data_text}/>
         <button onClick={this.data_push}>新增</button>
         <br/>
         請輸入收尋值:<input type="text" onChange={this.insert_text}/>
         {sort_data}
      </div>
    );
  }

抓到輸入值、並且推進陣列

我們用函數data_text，抓到輸入值並且存到state裡，再利用data_push把輸入值堆到陣列裡，最後利用昨天教的收尋把值做收尋。

 constructor(props) {
        super(props);
        this.state = {
          data:[
          ],
          search:'',
          newdata_text:'', //拿到新增的輸入值
        };//內部自定義的變數
       
      }

      insert_text = (e) => { //利用本身事件(e)找到自己
        this.setState({
            search:e.target.value
        })
       
      }

      data_text = (e) => { //利用本身事件(e)找到自己
        
        this.setState({
            newdata_text:e.target.value //把輸入值丟到newdata_text
        })
        
       
      }

      data_push = () => {
       this.state.data.push(this.state.newdata_text);

        this.setState({
          data:this.state.data
        })
        console.log(this.state.data);
        
      }

由於我們現在把所有的資料全部做處理，這樣太複雜我們明天把一些程式碼拆解成組件。
之後會分工合作，把資料都傳到父祖件做處理及渲覽。

參考資料:
https://reactjs.org/
自己